<template>
  <van-action-sheet customClass="top-sheet" :show="isShow" @close="closeHandle" title="开通上热搜权限">
    <view class="top-box">
      <van-divider contentPosition="center">请选择有效期</van-divider>
      <view class="top-card">
        <view
          class="card-list"
          @click="choseHandle(item)"
          :class="chooseInfo.product_id === item.product_id ? 'active' : ''"
          v-for="item in list"
          :key="item.product_id"
          :data-text="item.tip"
        >
          <text>{{ item.product_name }}</text>
          <text class="price">￥{{ item.product_price }}</text>
          <text class="line" v-if="item.origin_product_price">￥{{ item.origin_product_price }}</text>
        </view>
      </view>
      <view class="deduct" v-if="chooseInfo.coupon.coupon_name">
        <text class="title">优惠券抵扣</text>
        <view class="deduct-info">
          {{ chooseInfo.coupon.coupon_name }}优惠券&nbsp;&nbsp;共减<text>{{ chooseInfo.coupon.coupon_price }}元</text>
        </view>
      </view>
      <view class="pay">
        <view class="pay-price">
          <text>￥{{ chooseInfo.product_price }}</text>
          <text v-if="chooseInfo.coupon.coupon_name">已优惠￥{{ chooseInfo.coupon.coupon_price }}</text>
        </view>
        <view class="pay-btn" @click="payHandle">去支付</view>
      </view>
    </view>
  </van-action-sheet>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { getPriceInfo, orderAjax } from '@/http/buy'
export default {
  components: {},
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      isShow: props.isShow,
      list: [],
      chooseInfo: {
        coupon: {},
      },
    })
    const getPrice = async () => {
      const { data } = await getPriceInfo({
        product_type: 3,
      })
      state.list = data
      state.chooseInfo = data[0]
    }
    const closeHandle = () => {
      state.isShow = !state.isShow
      emit('closeHandle')
    }
    const choseHandle = (item) => {
      state.chooseInfo = item
    }
    const payHandle = async () => {
      const { product_id, product_price, coupon } = state.chooseInfo
      const { data } = await orderAjax({
        product_id,
        product_price,
        coupon_id: coupon.coupon_id ? coupon.coupon_id : '',
      })
      if (data.need_wx_pay == 1) {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            state.isShow = !state.isShow
            emit('closeHandle')
            uni.navigateTo({
              url: `/subpackage-platform/order/index`,
            })
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err))
          },
        })
      } else {
        uni.showToast({
          title: '恭喜您购买成功！',
          icon: 'none',
        })
        state.isShow = !state.isShow
        emit('closeHandle')
      }
    }
    onMounted(() => {
      getPrice()
    })
    return {
      ...toRefs(state),
      getPrice,
      closeHandle,
      choseHandle,
      payHandle,
    }
  },
}
</script>

<style lang="scss">
.top-box {
  width: calc(100% - 48rpx);
  padding: 0 24rpx;
  .top-card {
    display: flex;
    overflow-x: scroll;
    .card-list {
      position: relative;
      flex-shrink: 0;
      padding-top: 54rpx;
      width: 218rpx;
      height: 180rpx;
      margin-right: 24rpx;
      background: #fff;
      border: 2rpx solid #fff;
      border-radius: 16rpx;
      text {
        flex: 1;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        &:nth-child(1) {
          color: #7f8798;
        }
        &:nth-child(2) {
          margin: 18rpx 0 8rpx;
          font-size: 48rpx;
          color: #2b303b;
        }
        &:nth-child(3) {
          margin: 18rpx 0 8rpx;
          font-size: 24rpx;
          color: #7f8798 !important;
          text-decoration: line-through;
        }
      }
      &.active {
        border-color: #3775f2;
        background: #e5eeff;
        text {
          color: #3775f2;
        }
      }
      &::before {
        content: attr(data-text);
        padding: 0 10rpx;
        display: block;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
        background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
        position: absolute;
        top: -4rpx;
        right: -6rpx;
        border-radius: 0 16rpx 0 16rpx;
      }
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .deduct {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 64rpx);
    height: 80rpx;
    padding: 0 32rpx;
    margin: 20rpx 0 40rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .title {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }
    .deduct-info {
      font-size: 24rpx;
      color: #2b303b;
      text {
        color: #e94148;
      }
    }
  }
  .pay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pay-price {
      text {
        display: block;
        &:nth-child(1) {
          height: 52rpx;
          font-size: 36rpx;
          color: #e94148;
          line-height: 52rpx;
        }
        &:nth-child(2) {
          font-size: 20rpx;
          color: #140f08;
        }
      }
    }
    .pay-btn {
      width: 188rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
      border-radius: 40rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }
}
</style>
